<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">

          <a-col :xl="6" :lg="6" :md="6" :sm="24">
            <a-form-item label="订单编号">
              <el-input placeholder="请输入订单编号" v-model="queryParam.orderSn" style="width: 100%"></el-input>
            </a-form-item>
          </a-col>

          <a-col :xl="6" :lg="6" :md="6" :sm="24">
            <a-form-item label="异常状态">
              <el-select placeholder="请选择异常状态" style="width: 100%" v-model="queryParam.status">
                <el-option label="全部订单" value="">
                </el-option>
                <el-option label="售后订单" value="售后">
                </el-option>
                <el-option label="调价订单" value="调价">
                </el-option>
                <!--                <el-option label="超时订单" value="2">
                                </el-option>-->
              </el-select>
            </a-form-item>
          </a-col>
          <!--          <a-col :xl="5" :lg="5" :md="5" :sm="24">
                      <j-date placeholder="选择日期" v-model="queryParam.date" style="width: 100%"></j-date>
                    </a-col>-->

          <a-col :md="6" :sm="12">
            <a-form-item label="创建时间">
              <el-date-picker
                type="daterange"
                range-separator="~"
                start-placeholder="开始"
                end-placeholder="结束"
                placeholder="选择日期"
                @blur="formatD(form.date)"
                v-model="form.date"
                style="width: 100%;"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </a-form-item>
            <!--            <j-date placeholder="开始日期" v-model="queryParam.date" style="width: 100%"></j-date>-->
          </a-col>

          <a-col :xl="6" :lg="6" :md="6" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                <a-button type="primary" @click="form.date = '';searchReset()" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!--table区域-begin-->
    <div>
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        class="j-table-force-nowrap"
        @change="handleTableChange">

        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>

        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
          <img v-else :src="getImgView(text)" height="30px" alt=""
               style="max-width:80px;font-size: 12px;font-style: italic;"/>
        </template>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
          <a-button
            v-else
            :ghost="true"
            type="primary"
            icon="download"
            size="small"
            @click="uploadFile(text)">
            下载
          </a-button>
        </template>

        <span slot="action" slot-scope="text, record">
          <a @click="gotoDetail(record.orderType,record.orderSn)">查看详情</a>
          <a-menu-item v-show="record.status=='2'">
                  <a-popconfirm title="确定接单吗?" @confirm="() => orderNow(record.orderSn)">
                    <a style="color:deepskyblue">立即接单</a>
                  </a-popconfirm>
          </a-menu-item>

        </span>

      </a-table>
    </div>

<!--    <lgyxCreditRate-modal ref="modalForm" @ok="modalFormOk"></lgyxCreditRate-modal>-->

    <!--详情的弹框-->
    <div>
      <a-drawer
        title="订单详情"
        placement="right"
        :closable="false"
        :visible="visible"
        :after-visible-change="afterVisibleChange"
        :width="648"
        @close="onClose"
      >
        <!--上方的订单基础信息-->
        <div style="margin-top: 10px;width: 100%;margin-bottom: 30px;">
          <table>
            <tr class="mytr">
              <td class="fatitle">面料名称</td>
              <td class="facontent">{{ orderDetail.fabricName }}</td>
              <td class="fatitle">供应商</td>
              <td class="facontent">{{ null }}</td>
            </tr>
            <tr class="mytr">
              <td class="fatitle">订单编号</td>
              <td class="facontent">{{ orderDetail.orderSn }}</td>
              <td class="fatitle">下单时间</td>
              <td class="facontent">{{ orderDetail.createTime }}</td>
            </tr>
            <tr class="mytr">
              <td class="fatitle">下单门店</td>
              <td class="facontent">{{ orderDetail.username }}</td>
              <td class="fatitle">订单金额</td>
              <td class="facontent">{{ orderDetail.orderMoney }}</td>
            </tr>
          </table>
        </div>
        <div style="height: 30px;line-height: 30px;left: 10px">
          <b style="font-size: 20px">面料详细</b>
        </div>
        <!--弹框要显示的内容,遍历面料-->
        <div style="left: 10px;margin-bottom: 20px;" v-for="(item,key) in fabricOrderDetail" :key="item.id">

          <div style="margin-left: 10px">
            <!--左边的图片-->
            <div style="float: left">
              <img style="width: 153px;height: 158px;left: 10px;margin-top: 10px"
                   :src="item.fabricInfo.fabricImg">
              </img>
              <div class="fabricName">{{ item.fabricInfo.fabricName }}</div>
              <div class="fabricName">{{ item.fabricInfo.fabricCode }}</div>
            </div>
            <!--右边的表格-->
            <div style="display: inline-block;margin-left: 30px;margin-top: 10px">
              <table>
                <tr class="mytr">
                  <td class="fatitle">纱织</td>
                  <td class="facontent">{{ item.fabricInfo.fabricShazhi }}</td>
                </tr>
                <tr class="mytr">
                  <td class="fatitle">成分</td>
                  <td class="facontent">{{ item.fabricInfo.fabricContent }}</td>
                </tr>
                <tr class="mytr">
                  <td class="fatitle">克重</td>
                  <td class="facontent">{{ item.fabricInfo.fabricWeight }}</td>
                </tr>
                <tr class="mytr" v-show="false">
                  <td class="fatitle">花型</td>
                  <td class="facontent">8687</td>
                </tr>
                <tr class="mytr">
                  <td class="fatitle">颜色</td>
                  <td class="facontent">{{ item.fabricInfo.color }}</td>
                </tr>
                <tr class="mytr">
                  <td class="fatitle">样本</td>
                  <td class="facontent">{{ item.fabricInfo.fabricSample }}</td>
                </tr>
                <tr class="mytr">
                  <td class="fatitle">幅宽</td>
                  <td class="facontent">{{ item.fabricInfo.fabricWidth }}</td>
                </tr>
              </table>
            </div>
            <!--接下来是下面的大表格-->
            <div>
              <table style="width: 100%">
                <tr>
                  <td class="fabigtitle">米数</td>
                  <td class="fabigcontent">{{ item.buyNumber }}</td>
                </tr>
                <tr>
                  <td class="fabigtitle">标准单价</td>
                  <td class="fabigcontent">{{ item.fabricInfo.fabricPrice }}</td>
                </tr>
                <tr v-show="item.fabricInfo.kehuzk!='1'">
                  <td class="fabigtitle">客户折扣</td>
                  <td class="fabigcontent">{{ item.fabricInfo.kehuzk }}</td>
                </tr>
                <tr>
                  <td class="fabigtitle">实际单价</td>
                  <td class="fabigcontent">{{ item.fabricInfo.afterPrice }}</td>
                </tr>
                <tr>
                  <td class="fabigtitle">面料价格</td>
                  <td class="fabigcontent">{{ item.totalAmount }}</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
        <!--下方订单基本信息-->
        <div style="height: 30px;line-height: 30px;left: 10px">
          <b style="font-size: 20px">订单状态以及处理</b>
        </div>
        <div>
          <table style="width: 50%">
            <tr>
              <td class="fabigtitle">订单状态</td>
              <td class="fabigcontent">{{ getStatus(orderDetail.status) }}</td>
            </tr>
            <tr>
              <td class="fabigtitle">供应商接单</td>
              <td class="fabigcontent">{{ null }}</td>
            </tr>
            <tr v-show="orderDetail.status!='5'">
              <td class="fabigtitle">物流单号</td>
              <td class="fabigcontent">{{ orderDetail.otherOrdersn }}</td>
              <td class="fabigcontent" style="margin-left: 15px">
                <a-button type="primary" @click="theGoods(orderDetail.orderSn)" icon="CheckOutlined">确认收货</a-button>
              </td>
            </tr>
            <tr v-show="orderDetail.status=='6'">
              <td class="fabigtitle">售后方式</td>
              <td class="fabigcontent">{{ getAfterType(orderDetail.afterSalesType) }}</td>
            </tr>
            <tr v-show="orderDetail.status=='6'">
              <td colspan="2" style="width: 200px">
                <a-input placeholder="请输入换货物流单号" v-model="wuliuCode" style="float: left"/>
              </td>
              <td>
                <a-button style="float: right" type="primary" icon="CheckOutlined">确认发货</a-button>
              </td>
            </tr>
          </table>
        </div>
      </a-drawer>
    </div>
    <!--弹框结束-->
  </a-card>
</template>

<script>

import '@/assets/less/TableExpand.less'
import {mixinDevice} from '@/utils/mixin'
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
import JDate from '@/components/jeecg/JDate.vue'
import {getAction} from "../../api/manage";

export default {
  name: 'ExceptionOrder',
  mixins: [JeecgListMixin, mixinDevice],
  components: {
    JDate
    // LgyxCreditRateModal
  },
  data() {
    return {
      form: {
        date: ''
      },
      wuliuCode: '', //物流单号
      orderSn: '', // 选中的面料订单号
      visible: false, // 右边弹框的显示
      description: '面料订单',
      fabricOrderDetail: [], // 当前的面料订单详情
      orderDetail: {}, // 订单详情
      // 表头
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '订单编号',
          align: "center",
          dataIndex: 'orderSn'
        },
        {
          title: '订单类型',
          align: "center",
          dataIndex: 'orderType',
          customRender: function (text) {
            if (text == '0') {
              return '面料订单'
            } else if (text == '1') {
              return '个订订单'
            } else if (text == '2') {
              return '团订订单'
            } else if (text == '3') {
              return '成衣订单'
            }
          }
        },
        {
          title: '下单时间',
          align: "center",
          dataIndex: 'createTime'
          /* customRender: (text) => {
             //字典值替换通用方法
             return filterDictTextByCache('sex', text);
           }*/
        },
        {
          title: '异常类型',
          align: "center",
          dataIndex: 'errorName'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          // fixed:"right",
          width: 147,
          scopedSlots: {customRender: 'action'}
        }
      ],
      url: {
        list: '/orderCenter/listExceptionOrder',
        orderNow: '/orderCenter/orderNow', // 立即接单
        theGoods: '/orderCenter/theGoods', // 确认收货
        fabricDetail: '/cart/getFabricOrderDetail' // 面料订单详情
      },
      dictOptions: {},
    }
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    },
  },
  methods: {

    formatD(array) {
      this.queryParam.date = array[0]
      this.queryParam.enddate = array[1]
    },

    theGoods(orderSn) {// 确认收货
      getAction(this.url.theGoods, {'orderSn': orderSn}).then(res => {
        if (res.code == '200') {
          this.$message.success("操作成功")
        } else {
          this.$message.error("操作失败")
        }
        this.loadData()
      })
    },
    orderNow(orderSn) { // 立即接单
      getAction(this.url.orderNow, {'orderSn': orderSn}).then(res => {
        if (res.code == '200') {
          this.$message.success("接单成功")
        } else {
          this.$message.error("接单失败")
        }
        this.loadData()
      })
    },
    // 判断订单状态
    getStatus(text) {
      if (text == '11') {
        return '未支付'
      } else if (text == '1') {
        return '已支付'
      } else if (text == '2') {
        return '已提交'
      } else if (text == '3') {
        return '已接单'
      } else if (text == '4') {
        return '等待面料'
      } else if (text == '5') {
        return '剪裁'
      } else if (text == '6') {
        return '缝制'
      } else if (text == '7') {
        return '发货'
      } else if (text == '8') {
        return '订单完成'
      } else if (text == '9') {
        return '售后'
      }
    },
    // 判断售后方式
    getAfterType(text) {
      if (text == '0') {
        return '退货'
      } else if (text == '1') {
        return '换货'
      } else if (text == '2') {
        return '返修'
      } else if (text == '3') {
        return '重做'
      }
    },
    initDictConfig() {
    },
    // 下面三个是详情弹框的方法
    afterVisibleChange(val) {
      console.log('visible', val);
    },
    showDrawer(record) {
      this.orderSn = record.orderSn
      this.orderDetail = record // 订单详情
      this.visible = true;
    },
    onClose() {
      this.visible = false;
      this.fabricOrderDetail = []
    },
    // 前往订单详情界面
    gotoDetail(orderType, orderSn) {
      if (orderType == '0') {
        // 前往面料订单详情
        this.$router.push({path: '/orderCenter/fabricDetail', query: {order: orderSn}})
      } else if (orderType == '1') {
        // 前往个订详情
        this.$router.push({path: '/orderCenter/singleDetail', query: {order: orderSn}})
      } else if (orderType == '2') {
        // 前往团订详情
        this.$router.push({path: '/orderCenter/teamDetail', query: {order: orderSn}})
      }
    },
    // 开始查询订单的详情啦~~~
    getOrderDetail() {
      getAction(this.url.fabricDetail, {
        'token': '88411883', // token
        'orderSn': this.orderSn, // 选中的订单编号
      }).then(res => {
        this.fabricOrderDetail = res.data.cartInfoList //面料列表
      })
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';

.fabricName {
  margin-left: 10px;
  margin-top: 10px;
  width: auto;
  display: block !important;
  background: #2d2d2d;
  color: #ffe56d;
  text-align: center;
  border-radius: 3px;
}

.fabigtitle {
  height: 34px;
  width: 200px;
  text-align: left;
}

.fabigcontent {
  height: 34px;
  width: 200px;
  text-align: right;
}

.fatitle {
  height: 34px;
  width: 82px;
  background: rgb(242 242 242);
  text-align: center;
}

.facontent {
  width: 180px;
  overflow: hidden;
  text-align: center;
}
</style>